/**
 * 
 */
var res, data, i = 0;
// 定义数据结构模型
Ext.define('actiType', {
			extend : 'Ext.data.Model',
			idProperty : 'id',
			fields : [{
						name : 'label'
					}, {
						name : 'value'
					}]
		});
// 创建数据源
var store = Ext.create('Ext.data.Store', {
			model : 'actiType',
			proxy : {
				type : 'ajax',
				url : 'reportsAction!acti4rpt.action',
				reader : {
					type : 'json',
					root : 'data'
				}
			}
		});
// 地区数据
var areaStore = new Ext.data.JsonStore({
			proxy : {
				type : 'ajax',
				url : 'busiDictAction!getByType.action?type=8',
				reader : {
					type : 'json',
					root : 'list'
				}
			},
			fields : ['id', 'name']
		});
areaStore.load();
var areaCombobox = Ext.create('Ext.form.ComboBox', {
			fieldLabel : '区县',
			labelAlign : 'left',
			store : areaStore,
			name : 'areaid',// 控件名称
			editable : false,
			labelWidth : 45,
			width : 170,
			displayField : 'name',
			valueField : 'id',// 实际值
			listeners : {
				select : function(combo, records, eOpts) { // 该处实现自动对store加载
					var proxy = store.getProxy(); // 获取store里面的proxy全部
					proxy.extraParams = {
						"areaid" : areaCombobox.getValue()
					};
					i++;
					store.reload();
					Ext.Ajax.request({
								async : false,
								url : 'reportsAction!acti4rpt.action?areaid='
										+ areaCombobox.getValue(),
								success : function(response) {
									res = response.responseText;
									data = res.data;
									var columnChart = new FusionCharts(
											"js/FusionCharts_V3.3/Column3D.swf",
											"myChartId" + i, "95%", "95%");

									var pieChart = new FusionCharts(
											"js/FusionCharts_V3.3/Pie3D.swf",
											"pieChartId" + i, "80%", "90%");
									columnChart.setJSONData(res);
									columnChart.render("columnchartContainer");
									pieChart.setJSONData(res);
									pieChart.render("piechartContainer");
								}
							});
				}
			}
		});

var columnchartPanel = new Ext.form.Label({
			id : 'columnchartContainer'
		});
var piechartPanel = new Ext.form.Label({
			id : 'piechartContainer'
		});
var beginDate = Ext.create('Ext.ux.form.MonthField', {
			fieldLabel : '时间阶段',
			name : 'begin',
			labelWidth : 60,
			width : 170,
			xtype : 'monthfield',
			editable : false,
			format : 'Y-m',
			labelAlign : 'left'
		});
var endDate = Ext.create('Ext.ux.form.MonthField', {
			fieldLabel : '至',
			labelSeparator : '',
			name : 'end',
			labelWidth : 25,
			width : 135,
			xtype : 'monthfield',
			editable : false,
			format : 'Y-m',
			labelAlign : 'left'
		});
function init() {
	i++;
	store.reload();
	var areaid = areaCombobox.getValue();
	var begin = beginDate.getValue();
	var end = endDate.getValue();
	if (areaid == undefined) {
		areaid = null;
	}
	Ext.Ajax.request({
				async : false,
				url : 'reportsAction!acti4rpt.action?areaid=' + areaid
						+ '&begin=' + begin + '&end=' + end,
				success : function(response) {
					res = response.responseText;
					data = res.data;
					var columnChart = new FusionCharts(
							"js/FusionCharts_V3.3/Column3D.swf", "myChartId"
									+ i, "95%", "95%");

					var pieChart = new FusionCharts(
							"js/FusionCharts_V3.3/Pie3D.swf", "pieChartId" + i,
							"80%", "90%");
					columnChart.setJSONData(res);
					columnChart.render("columnchartContainer");
					pieChart.setJSONData(res);
					pieChart.render("piechartContainer");
				}
			});
};
var grid = Ext.create('Ext.grid.GridPanel', {
			title : "统计表",
			store : store,
			renderTo : Ext.getBody(),
			border : 0,
			features : [{
						ftype : 'summary'
					}],
			columns : [{
						text : '活动类别',
						dataIndex : 'label',
						summaryType : 'count',
						flex : 1,
						summaryRenderer : function(value, summaryData,
								dataIndex) {
							return '总类别： ' + value;
						}
					}, {
						text : '数量',
						sortable : false,
						dataIndex : 'value',
						summaryType : 'sum',
						flex : 1,
						summaryRenderer : function(value, summaryData,
								dataIndex) {
							return '总数量： ' + value;
						}
					}],
			viewConfig : {
				forceFit : true
				// 让grid的列自动填满grid的整个宽度，不用一列一列的设定宽度。
			},
			stripeRows : true
		});
Ext.onReady(function() {

	Ext.create('Ext.container.Viewport', {
		layout : 'fit',
		items : [{
					border : false,
					layout : {
						type : 'hbox',
						align : 'stretch'
					},

					items : [{
								flex : 1,
								layout : 'fit',
								items : [grid]
							}, {
								flex : 4,
								layout : 'fit',
								items : [{
											width : 600,
											border : false,
											layout : {
												type : 'vbox',
												align : 'stretch'
											},
											items : [{
														border : false,
														flex : 1,
														autoScroll : true,
														title : '柱形图',
														tbar : [areaCombobox
														// ,beginDate, endDate,
														// '|', {
														// xtype : 'button',
														// text : '确定',
														// handler : function()
														// {
														// init();
														// }
														// }
														],
														items : [columnchartPanel]
													}, {
														id : 'pieChart',
														border : false,
														layout : 'fit',
														flex : 1,
														xtype : 'panel',
														title : '饼图',
														items : [piechartPanel]
													}]
										}

								]
							}]
				}]
	});
	store.load();
	Ext.Ajax.request({
				async : false,
				url : 'reportsAction!acti4rpt.action',
				success : function(response) {
					res = response.responseText;
					data = res.data;
					var columnChart = new FusionCharts(
							"js/FusionCharts_V3.3/Column3D.swf", "myChartId"
									+ i, "95%", "95%");

					var pieChart = new FusionCharts(
							"js/FusionCharts_V3.3/Pie3D.swf", "pieChartId" + i,
							"80%", "90%");
					columnChart.setJSONData(res);
					columnChart.render("columnchartContainer");
					pieChart.setJSONData(res);
					pieChart.render("piechartContainer");
				}
			});
});